<template>
    <div class="event-spread">
        <div class="common-title y-center">
            <span class="common-card-header-dot" />
            <span>转发时间趋势</span>
        </div>
        <div id="chart" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'index',
        components: {
        },
        data() {
            return {
                value: ''
            }
        },
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
            // 获取图表容器
            const chartDom = document.getElementById('chart');
            // 初始化 ECharts 实例
            const myChart = echarts.init(chartDom);
            
            // 图表的配置项
            const option = {
                tooltip: {
                trigger: 'axis',
                },
                legend: {
                data: ['销量'],
                left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    // axisLine: {
                    //     show: true,
                    //     lineStyle: {
                    //         type: 'dashed',  // 设置为虚线
                    //         color: '#828898',
                    //         width: 1
                    //     }
                    // },
                    axisLabel: {
                        color: '#828898',
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed', // X轴网格线设置为虚线
                            color: '#828898',
                            width: 0.5
                        }
                    },
                    splitArea: {
      show: true,
      areaStyle: {
        // type: 'solid',
        color: ['#3F3651', '#3F394F']  // 交替背景色
      }
    }
                },
                yAxis: {
                    type: 'value',
        //             axisLine: {
        //     show: true,
        //     lineStyle: {
        //       type: 'dashed',  // 设置为虚线
        //       color: '#333',
        //       width: 2
        //     }
        //   },
          axisLabel: {
            color: '#828898'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // X轴网格线设置为虚线
              color: '#828898',
              width: 0.5
            }
          }
                },
                series: [
                    {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true,
                    areaStyle: {}, // 填充区域
    //                 markLine: {
    //     symbol: ['none', 'none'],
    //     label: { show: false },
    //     data: [{ xAxis: 0 },{ xAxis: 1 },{ xAxis: 2 }, { xAxis: 3 }, { xAxis: 4 },{ xAxis: 5 }, { xAxis: 6 },{ xAxis: 7 }]
    //   },
    //                 itemStyle: (params) => {
    //           const colorList = ['#ff6347', '#ff4500', '#32cd32', '#4682b4', '#8a2be2', '#ff1493'];
    //           // 使用 params.dataIndex 来选择不同的数据项对应的颜色
    //           return {
    //             color: colorList[params.dataIndex]
    //           };
    //         }
                    }
                ],
                series1: [
                {
                    name: '销量',
                    type: 'line',
                    smooth: true,  // 开启平滑效果
                    areaStyle: {}, // 填充区域
                    data: [10, 15, 30, 40, 60, 70],  // 数据
                    lineStyle: {
                    width: 3,  // 线条宽度
                    color: '#2f89cf'  // 线条颜色
                    }
                }
                ],
                grid: {
                    top: '30px',
                    bottom: '30px',
                    left: '30px',
                    right: '30px'                  
                }               
            };

            // 使用配置项设置图表
            myChart.setOption(option);
            }
        }
    }
</script>

<style lang="scss" scoped>
.common-title {
    height: 30px;
    padding: 0 12px;
    font-weight: bold;
    font-size: 18px;
    background: #1E1E1E;
    color: #9E9E9E;
    border-bottom: 1px solid #000;
    margin-bottom: 40px;

    .common-card-header-dot {
        width: 14px;
        height: 14px;
        display: inline-block;
        background: #424242;
        border-radius: 100%;
        margin-right: 8px;
    }
}
</style>